<template>
  <!-- 布局容器 -->
  <el-container>
    <!-- 1侧边栏 -->
    <el-aside width="auto">
      <!-- 左侧导航栏 -->
      <el-menu
        router
        :collapse="collapse"
        :default-active="newurl"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <!-- 顶部首页 -->
        <el-menu-item>
          <!-- <i class="el-icon-user"></i> -->
          <span slot="title">{{ collapse ? "后台 " : "学之思管理端" }}</span>
        </el-menu-item>
        <!-- 1主页 -->
        <el-menu-item route="/home" index="1" @click="fun('1')">
          <i class="el-icon-s-home"></i>
          <span slot="title">主页</span>
        </el-menu-item>
        <!-- 2用户管理 -->
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" route="/xuesheng" @click="fun('2-1')"
              >学生列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="2-2" route="/jiaoshi" @click="fun('2-2')"
              >教师列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="2-3" route="/guanliyuan" @click="fun('2-3')"
              >管理员列表</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 3学科管理 -->
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-reading"></i>
            <span>学科管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1" route="/xklb" @click="fun('3-1')"
              >学科列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="3-2" route="/xkcb" @click="fun('3-2')"
              >学科创编</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 4知识点管理 -->
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-document-checked"></i>
            <span>知识点管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1" route="/knowledgelist" @click="fun('4-1')"
              >知识点列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="4-2" route="/knowledgecreate" @click="fun('4-2')"
              >知识点创编</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 5卷库管理 -->
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-document-checked"></i>
            <span>卷库管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1" route="/testlist" @click="fun('5-1')"
              >试卷列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="5-2" route="/testcreate" @click="fun('5-2')"
              >试卷创编</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 6题库管理 -->
        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>题库管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1" route="/timuliebiao" @click="fun('6-1')"
              >题目列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="6-2" route="/danxuan" @click="fun('6-2')">单选题创编</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="6-3" route="/duoxuan" @click="fun('6-3')">多选题创编</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="6-4" route="/panduan" @click="fun('6-4')">判断题创编</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="6-5" route="/tiankong" @click="fun('6-5')"
              >填空题创编</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="6-6"  route="/jianda" @click="fun('6-6')">简答题创编</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 7任务管理 -->
        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-chat-line-square" ></i>
            <span>任务管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1" route="/renwuliebiao" @click="fun('7-1')"
              >任务列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="7-2" route="/renwuchuangbian" @click="fun('7-2')"
              >任务创编</el-menu-item 
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 8视频管理 -->
        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-chat-line-square"></i>
            <span>视频管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="8-1" route="/shipinliebiao" @click="fun('8-1')"
              >视频列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="8-2" route="/shipinchuangbian" @click="fun('8-2')"
              >视频创编</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 9答卷管理 -->
        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-chat-line-square"></i>
            <span>答卷管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="9-1" route="/pigailiebiao" @click="fun('9-1')"
              >批改列表</el-menu-item
            >
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="9-2" route="/shijuanwancheng"  @click="fun('9-2')"
              >试卷完成</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
        <!-- 10消息中心 -->
        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-chat-line-square"></i>
            <span>消息中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="10-1"  route="/xiaoxi" @click="fun('10-1')" >消息列表</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="10-2" route="/xxfs"  @click="fun('10-2')">消息发送</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <!-- 11日志中心 -->
        <el-submenu index="11">
          <template slot="title">
            <i class="el-icon-chat-line-square"></i>
            <span>日志中心</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="11-1" route="/yhrz"  @click="fun('11-1')">用户日志</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 2头部 -->
      <el-header style="height: 80px">
        <div class="header-top">
          <div class="left">
            <!-- 汉堡包 -->
            <i class="el-icon-s-fold" v-if="!collapse" @click="ChangMenu()"></i>
            <i class="el-icon-s-unfold" v-else @click="ChangMenu()"></i>
            <!-- 面包屑 -->
            <!-- // 3.调用封装好的路由信息函数 -->
            <BreadCrumb :arr="this.showRouter(this.$route)" />
          </div>
          <!-- 入口 -->
          <div class="right">
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                admin<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handler1()"
                  >主页</el-dropdown-item
                >
                <el-dropdown-item @click.native="handler2()"
                  >简介</el-dropdown-item
                >
                <el-dropdown-item @click.native="handler3()"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="header-bottom">
          <el-tag effect="dark"> 主页 </el-tag>
        </div>
      </el-header>
      <!-- 3内容区 -->
      <el-main>
        <!-- 二级路由出口 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  mounted() {
    // 3.调用封装好的路由信息函数
    console.log(this.showRouter(this.$route));
  },
  data() {
    return {
      collapse: false,
    };
  },
  methods: {
    fun(url) {
      window.localStorage.setItem("url", url);
      // console.log(url);
    },
    ChangMenu() {
      this.collapse = !this.collapse;
    },
    // 主页
    handler1() {
      this.$router.push("/home");
    },
    // 简介
    handler2() {
      this.$router.push("/jianjie");
    },
    // 退出
    handler3() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push("/denglu");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  computed: {
    newurl() {
      if (window.localStorage.getItem("url") != null) {
        return window.localStorage.getItem("url");
      } else {
        return "1";
      }
    },
  },
};
</script>
<style scoped>
.el-header {
  padding: 0 0;
}
.el-header .header-top {
  height: 60%;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header .header-bottom {
  height: 40%;
  box-shadow: 2px 2px 3px 2px #ccc;
}
.el-tag {
  margin-left: 20px;
}
.el-header .home {
  margin-left: 20px;
  font-weight: 500;
}
.el-aside {
  background: #545c64;
}
.el-header .left {
  display: flex;
  margin-left: 20px;
}
.el-header .right {
  margin-right: 30px;
}
.el-breadcrumb {
  margin-left: 20px;
}
.el-main {
  background: #eff1f4;
}
.el-container,
.el-main {
  height: 100%;
}
</style>
